<script setup>
import {useUserStore} from "@/stores/user.js";
import router from "@/router/index.js";
import {ElMessage} from "element-plus";
import {useAddressStore} from "@/stores/address.js";

const exit=()=>{
  useUserStore().clearUserInfo()
  useAddressStore().clearAddressList()
  useUserStore().loadShop()
  router.replace('/homePage')
  ElMessage({
    message: '退出成功',
    type: 'success',
    plain: false,
  })
}

</script>

<template>
<div class="PageHeaderBar">
  <div class="left">
    <span>
      <el-icon color="#39bf3e" size="15"><Monitor /></el-icon>当前为PC版 |</span>
    <span> 欢迎来到智农销！</span>

    <template v-if="!useUserStore().isLogin">
      <span class="loginSpan" @click="router.push('/login')">请登录</span>
      <span class="registerSpan" @click="router.push('/register')">注册</span>
    </template>
  </div>
  <div class="right">
    <template v-if="useUserStore().isLogin">
      <el-popconfirm title="确定要退出吗" @confirm="exit">
        <template #reference>
          <span class="exit" style="color: #39bf3e">退出</span>
        </template>
      </el-popconfirm>
    </template>
  </div>
</div>
</template>

<style scoped lang="less">
.PageHeaderBar{
  background-color: #f5f5f5;
  width: auto;
  padding: 0 30px;
  margin-bottom: 35px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  text-align: center;
  font-size: 12px;
  color: #999;
}

.loginSpan{
  margin-left: 20px;
  margin-right: 10px;
  color:#39bf3e;
}
.loginSpan:hover{
  cursor: pointer;
}
.registerSpan:hover{
  cursor: pointer;
}
.exit:hover{
  color:#39bf3e ;
  cursor: pointer;
}
</style>